<template>
	<view class="page-content">
		<u-tabs 
			:list="tabs" 
			:current="param.state"
			:activeStyle="{color:'#3f2a17',fontSize:'28rpx'}"
			:inactiveStyle="{fontSize:'26rpx'}"
			lineColor="#f2bc35"
			:scrollable="false"
			@change="tabChange">
		</u-tabs>
		<view class="receive-list conter">
			<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
			<view class="receiver-list_list" v-if="!listLoad">
				<view class="receive-item m-b-md radius-10 rel" v-for="(item, index) in list.data" :key="index" @click="$util.go('task/task_detail?id='+item.task_id)">
					<view class="p-md p-t-sm p-b-sm flex-between">
						<text class="text-secondary text-xs">{{ item.create_time }}</text>
						<!-- <text class="receive-item_state abs light text-xs" :class="{'bg-warning text-warning' : item.state == 2,'bg-danger text-danger' : item.state == 3 || item.state == 5,'bg-success text-success' : item.state == 4}">{{item.state_desc}}</text> -->
					</view>
					<view class=" p-l-md p-r-md p-b-sm">
						<view class="flex-start">
							<text class="badge">{{ item.task_type_text }}</text>
							<text class="m-l-xs text-sm">{{ item.task_title }}</text>
						</view>
						<view class="flex-start m-t-sm" v-if="item.type == 1 && (item.state == 1 || item.state == 2)">
							<text class="text-xs m-r-xs text-secondary">{{$t('my-receive.task-list-price')}}</text>
							<text class="number" :style="{color:configInfo.mainColor1}">{{ item.task_price }}</text>
							<text class="text-xs m-l-xs text-secondary" v-if="configInfo.money_company">{{configInfo.money_company}}</text>
							<view v-if="item.task_integral > 0">
								<text class="text-sm number m-l-xs" :style="{color:configInfo.mainColor1}">+ {{item.task_integral}}</text>
								<text class="text-xs m-l-xs text-secondary" v-if="configInfo.integral_company">{{configInfo.integral_company}}</text>
							</view>
						</view>
						<view class="m-t-sm" v-if="item.state == 6 && item.state_text">
							<text class="text-danger">{{ item.state_text }}</text>
						</view>
					</view>
					<view class="watermark abs flex-center" :class="{'warning' : item.state == 2 || item.state == 5,'danger' : item.state == 3,'success' : item.state == 4 ,'fail' : item.state == 6}">
						<view class="watermark_circle flex-center">
							<text class="watermark__title text-xs">{{ item.state_desc }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				param: {
					page: 1,
					state: '',
				},
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
				type:'',
				
				showLoading:false,
				status:"loading",
				onCurrent:"0",
				listLoad:true,
				listEmptyShow:false,
				pageLoading:true,
				scrollTop:0
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			tabs: state => state.taskOrder.orderTabs,
			contentText: state => state.content.contentText,
		}),
		
		// 页面加载
		async onLoad(option) {
			let {
				type
			} = option
			this.param.state = type
		},
		
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		
		// 页面显示
		async onShow(){
			this.getList();
		},
		
		// 右上角点击
		onNavigationBarButtonTap(){
			uni.switchTab({
				url: '/pages/task/task'
			});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 页面隐藏
		onHide(){
			// 关闭加载
			this.$util.hideAll()
		},
		
		// 下拉刷新
		async onPullDownRefresh(){
			await this.getList();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);	
		},
		
		methods: {
			async getList(page = 0){
				if(page){
					this.param.page = page
				}
				let res = await this.$api.task.getTaskOrderList(this.param)
				if(res.code == 200){
					let newList = res.data
					if(page > 1){
						newList.data = this.list.data.concat(newList.data) // 合并数组
					}
					this.list = newList
					this.listLoad = false;
				}
			},
			
			tabChange(index){
				this.param.state = index.state
				this.listLoad = true
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getList(1)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F3F3F3;
	}
	.page-content{
		height: 100%;
		position:relative;
	}
	.u-tabs{
		background-color: #fff;
	}
	.receive-list{
		
	}
	.receive-item{
		background-color: #fff;
		flex-wrap: nowrap;
		overflow: hidden;
		.flex-left{
			max-width: 65%;
		}
		// &_head{
		// 	border-bottom: 1px solid var(--theme-line-four);
		// }
		&_title{
			
		}
		&_price{
			margin: 5px 0;
			color: $auxcolor-2;
			font-size: $contentSize;
		}
		&_time{
			color: $incolor-2;
		}
		&_state{
			right: 0;
			top: 0;
			padding: 10rpx 20rpx;
			border-bottom-left-radius: 10px;
			color: #999;
			background-color: #F3F3F3;
		}
	}
	.watermark{
		// position: absolute;
		right: -15rpx;
		top: -15rpx;
		width: 140rpx;
		height: 140rpx;
		border: 1px solid #000;
		border-radius: 100%;
		transform: rotate(30deg);
		opacity: .6;
		&_circle{
			border: 1px dashed #000;
			width: 130rpx;
			height: 130rpx;
			border-radius: 100%;
		}
		&__title{
			border-top: 1px solid #000;
			border-bottom: 1px solid #000;
			padding: 5rpx 10rpx;
		}
	}
	.watermark.warning{
		border-color: #ff9900!important;
	}
	.watermark.warning .watermark_circle{
		border-color: #ff9900!important;
	}
	.watermark.warning .watermark__title{
		color: #ff9900!important;
		border-color: #ff9900!important;
	}
	.watermark.success{
		border-color: #18b566!important;
	}
	.watermark.success .watermark_circle{
		border-color: #18b566!important;
	}
	.watermark.success .watermark__title{
		color: #18b566!important;
		border-color: #18b566!important;
	}
	.watermark.danger{
		border-color: #fa3534!important;
	}
	.watermark.danger .watermark_circle{
		border-color: #fa3534!important;
	}
	.watermark.danger .watermark__title{
		color: #fa3534!important;
		border-color: #fa3534!important;
	}
	.watermark.fail{
		border-color: #9a9998!important;
	}
	.watermark.fail .watermark_circle{
		border-color: #9a9998!important;
	}
	.watermark.fail .watermark__title{
		color: #9a9998!important;
		border-color: #9a9998!important;
	}
</style>
